<template>
	<view style="width: 100%;">
		<u--input v-model="valueName" @click.native="showPicker" :placeholder="placeholder"
			:placeholderClass="placeholderClass" :placeholderStyle="placeholderStyle" :inputAlign="inputAlign"
			:fontSize="fontSize" :color="color" :prefixIcon="prefixIcon" :prefixIconStyle="prefixIconStyle"
			:suffixIcon="suffixIcon" :suffixIconStyle="suffixIconStyle" :border="border" :shape="shape"
			:customStyle="customStyle" disabled :disabledColor="disabledColor" />
		<u-calendar :show="pickerShow" :mode="calendarMode" @confirm="confirmCalendar" @close="closeCalendar"
			ref="calendar" :maxDate="calendarmaxDate" :minDate="minDate">
		</u-calendar>
		<!-- <uni-datetime-picker type="daterange" :disabled="disabled" :clear-icon="false" v-model="range" /> -->
	</view>
</template>
<script>
	export default {
		name: "HCalendarSelect",
		data() {
			return {
				pickerShow: false, //picker选择器状态
				valueName: '', //所选id 值参数
				timeValue: '',
				range: [],
				// beforeDate: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).getTime().toString() // 可选择的最早日期 // 可选择的最早日期
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: {
				type: [String, Number],
				default: '',
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 输入框为空时的占位符
			placeholder: {
				type: [String, Number],
				default: '请选择日期',
			},
			// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
			placeholderClass: {
				type: [String],
				default: '',
			},
			// 指定placeholder的样式，字符串/对象形式，如"color: red;"
			placeholderStyle: {
				type: [String, Object],
				default: 'color: #C0C4CC'
			},
			// 输入框内容对齐方式 - left | center | right
			inputAlign: {
				type: [String, ],
				default: 'left',
			},
			// 输入框字体的大小
			fontSize: {
				type: [String, Number],
				default: '15px',
			},
			// 输入框字体颜色
			color: {
				type: [String],
				default: '#303133',
			},
			// 输入框前置图标
			prefixIcon: {
				type: [String],
				default: '',
			},
			// 前置图标样式，对象或字符串
			prefixIconStyle: {
				type: [String, Object],
				default: '',
			},
			// 输入框前置图标
			suffixIcon: {
				type: [String],
				default: '',
			},
			// 前置图标样式，对象或字符串
			suffixIconStyle: {
				type: [String, Object],
				default: '',
			},
			// 边框类型，surround-四周边框，bottom-底部边框，none-无边框
			border: {
				type: [String],
				default: 'surround',
			},
			// 输入框形状，circle-圆形，square-方形
			shape: {
				type: [String],
				default: 'square',
			},
			customStyle: {
				type: [Object],
				default: () => {},
			},

			// 日历设置
			// 日期类型选择 multiple-可以选择多个日期，range-选择日期范围（多个月需配合monthNum属性使用
			calendarMode: {
				type: [String],
				default: 'range',
			},

			// 主题色，对底部按钮和选中日期有效
			calendarColor: {
				type: [String],
				default: '#3c9cff',
			},
			// 是否显示标题
			calendarShowTitle: {
				type: Boolean,
				default: true
			},
			// 标题内容
			calendarTitle: {
				type: [String],
				default: '日期选择',
			},
			// mode=range时，第一个日期底部的提示文字
			calendarStartText: {
				type: [String],
				default: '开始',
			},
			// mode=range时，最后一个日期底部的提示文字
			calendarEndText: {
				type: [String],
				default: '结束',
			},
			// 自定义列表
			calendarCustomList: {
				type: Array,
				default: () => [],
			},
			// 最小的可选日期
			calendarMinDate: {
				type: [Number, String],
				default: 0,
			},
			// 最大可选日期
			calendarmaxDate: {
				type: [Number, String],
				default: 0,
			},
			minDate: {
				type: [Number, String],
				default: 0,
			},
			// 默认选中的日期，mode为multiple或range是必须为数组格式
			calendarDefaultDate: {
				type: [Number, String, Date],
				default: null,
			}

		},
		watch: {
			value: {
				handler: function(newData) {
					//处理数据
					if (newData) {
						this.valueName = newData
						this.timeValue = new Date(newData).getTime()
					} else {
						this.valueName = newData
						this.timeValue = Number(new Date())
					}
				},
				immediate: true
			}
		},
		computed: {
			// 当是disabled为true改变禁用的颜色
			disabledColor() {
				if (this.disabled) {
					return '#f5f7fa'
				} else {
					return '#FFFFFF'
				}
			}
		},
		methods: {
			//点击展示
			showPicker() {
				if (this.disabled) return false
				this.pickerShow = true;
			},
			confirmCalendar(val) {
				this.$emit('confirm', val)
				this.pickerShow = false;
			},
			closeCalendar() {
				this.pickerShow = false;
			}
		},
	}
</script>